<template>
	<div>
		<div >
			<div class="panel-body">
				<el-row :gutter="24">
					<el-col :span="12">
						<div class="grid-content bg-purple" style="background: #fff">
							<div class="panel-heading">
								人数
							</div>
							<v-chart :force-fit="true" :height="height" :data="data" :scale="scale">
								<v-tooltip :crosshairs="crosshairs"/>
								<v-axis/>
								<v-line :position="'year*value'"/>
								<v-point :position="'year*value'" :size="'4'" shape="circle" :v-style="stackBarStyle"/>
							</v-chart>
						</div>
					</el-col>
	  				<el-col :span="12">
	  					<div class="grid-content bg-purple" style="background: #fff">
	  						<div class="panel-heading">
								次数
							</div>
							<v-chart :force-fit="true" :height="height" :data="data_pin" :scale="count">
								<v-tooltip :crosshairs="crosshairs"/>
								<v-axis/>
								<v-line :position="'year*value'"/>
								<v-point :position="'year*value'" :size="'4'" shape="circle" :v-style="stackBarStyle"/>
							</v-chart>
	  					</div>
	  				</el-col>
				</el-row>
			</div>

		</div>
		<div style="margin:15px">
			<el-row>
				<el-col :span="24">
					<div class="grid-content bg-purple">
						<el-card class="box-card">
						  <div slot="header" class="clearfix">
						    <span>通知</span>
						  </div>
						  <el-table :data="notification" style="width: 100%" :show-header="false" >
							<el-table-column @click="hangClcik(scope.row)">
								<template slot-scope="scope" >
									<div>
										<span v-if="scope.row.bool">
											<el-badge is-dot class="item" >{{scope.row.data.title}}</el-badge>
										</span>
										<span v-else>
											{{scope.row.data.title}}
										</span>
									</div>
								</template>
							</el-table-column>
						<el-table-column>
							<template slot-scope="scope">
								<el-button size="mini" v-if="scope.row.data.path"  type="default" icon="el-icon-download" @click="download(scope.row.data.path)" plain></el-button>
							</template>
						</el-table-column>
					      <el-table-column prop="created_at"></el-table-column>
					      <el-table-column >
					      		<template slot-scope="scope">
					      			<el-button type="default" size="mini" @click="hangClcik(scope.row)" plain icon="el-icon-search"></el-button>
					      			<el-button type="danger" size="mini" @click="deleteNo(scope.$index, scope.row)" plain icon="el-icon-close"></el-button>
					      		</template>
					      </el-table-column>
					    </el-table>
						</el-card>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>


<script>
	import Vue from 'vue'
	import viser from 'viser-vue'
	import api from '../apis'
	import store from '../store'

	Vue.use(viser);

	export default {
		name: 'dashboard',
		data() {
			return {
				data_pin: [],
				data: [],
				height: 400,
				crosshairs: {
					type: 'line'
				},
				scale: [
					{
						dataKey: 'value',
						alias: '人数'
					}
				],
				count: [
					{
						dataKey: 'value',
						alias: '次数'
					}
				],
				stackBarStyle: {
					stroke: '#fff',
					lineWidth: 1
				},
				notification:[],
			};
		},
		methods: {
			/**
			 * 点击下载
			 */
			download(url){
				window.location.href = url;
			},
			/**
			 * 数据加载
			 */
			fetch() {
				api.dashboard.fetch({key: 'uid'}).then(response => {
					this.data = response.data;
				});
				api.dashboard.fetch({key: 'shop_id'}).then(response => {
					this.data_pin = response.data;
				});
			},
			/**
			 * 请求通知
			 */
			fetchUser(){
				api.notification.fetchUser().then(response => {

					for(var i = 0;i<response.data.length;i++){
						if(response.data[i].read_at == null || response.data[i].read_at == ''){
							response.data[i]['bool'] = true;
						}else{
							response.data[i]['bool'] = false;
						}
					}

					this.notification = response.data;


				});
			},
			/**
			 * 已读发送
			 */
			fetchYiDu(id){
				api.notification.fetchYiDu(id).then(response => {
					this.fetchUser();
				});
			},
			/**
			 * 删除
			 */
			fetchDelete(id){
				api.notification.fetchDelete(id).then(response => {
					this.fetchUser();
				});
			},
			deleteNo(index, row){
				if(row.read_at == null || row.read_at == ''){
					this.$message({
			          message: '消息未读,不可删除',
			          type: 'warning'
			        });
				}else{
					this.fetchDelete(row.id);
				}
			},
			/**
			 * 行点击事件
			 */
			hangClcik(row) {
				this.$alert(row.data.content, row.data.title, {
		          confirmButtonText: '确定',
		        });
				if(row.read_at == null || row.read_at == ''){
					this.fetchYiDu(row.id);
				}
			}
		},
		mounted() {
			this.fetch();
			this.fetchUser();
		}
	};
</script>
<style type="text/css">
.item {
  margin-top: 3px;
  margin-right: 0px;
}
</style>
